import React, { useEffect, useState } from "react";
import {
  Card,
  Space,
  Select,
  Input,
  Button,
  Table,
  Switch,
  Modal,
  Form,
} from "antd";
import {
  PlusOutlined,
  AppstoreTwoTone,
  EditTwoTone,
  DeleteTwoTone,
  UserOutlined,
} from "@ant-design/icons";
import Message from "@/components/Message";
import { RoleFz } from "../../stores/RoleFz";
import { useNavigate } from "react-router-dom";
import { useSnapshot } from "valtio";

interface RecordType {
  _id: string | number;
}
export default function RoleManagement() {
  const change = (select,data) => {
    // console.log(select,data)
    let updateData = {
      _id: data._id,
      state: select,
    };
    role.updateRoleList(updateData)
    role.getRoleList()
  }
  const role = useSnapshot(RoleFz);
  const [defaults, setDefaults] = useState("");
  const [open, setOpen] = useState(false);
  const TextArea = Input.TextArea;
  const navigat = useNavigate();
  const [tro, setTro] = useState(true);
  const Reset = () => {
    setAdds(!adds);
    role.xgname("");
    setDefaults("");
  };
  let [adds, setAdds] = useState(true);
  let [id, setID] = useState("");

  const AddList = () => {
    let addData = {
      name: username,
      state: true,
      desc: "",
      type: btn.label,
    };
    //等待数据链接
    role.addRoleList(addData);
    setAdds(!adds);
    setUsername("");
    setBtn({ value: 1, label: "品牌角色" });
    setOpen(false);
  };
  const dataSource = role.data;
  const columns = [
    {
      title: "序号",
      dataIndex: "_id",
      key: "_id",
    },
    {
      title: "角色名",
      dataIndex: "name",
      key: "_id",
    },
    {
      title: (
        <span>
          角色人员
          <UserOutlined />
        </span>
      ),
      dataIndex: "num",
      key: "_id",
    },
    {
      title: "描述",
      dataIndex: "desc",
      render: (text: any) => <Space>暂无相关描述</Space>,
      key: "_id",
    },
    {
      title: "角色类型",
      dataIndex: "type",
      key: "_id",
    },
    {
      title: "启用",
      dataIndex: "state",
      key: "_id",
      render: (text: any,record:any) => <Switch checked={record.state} onChange={(e) => change(e,record)} />,
    },
    {
      title: "操作",
      key: "_id",
      render: (text: any) => (
        <Space>
          <Button
            type="link"
            onClick={() => {
              navigat("/permissions");
            }}
          >
            <AppstoreTwoTone />
            设置权限
          </Button>
          <Button
            type="link"
            onClick={() => {
              setTro(false);
              handleEditClick(text);
              setID(text._id);
            }}
          >
            <EditTwoTone />
            编辑
          </Button>
          <Button
            type="link"
            onClick={() => {
              setShow(true);
              setID(text._id);
            }}
          >
            <DeleteTwoTone />
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const [btn, setBtn] = useState({ value: 1, label: "品牌角色" });

  useEffect(() => {
    role.getRoleList();
  }, [adds]);
  const handleChange = (value: string) => {
    setDefaults(value);
  };
  const EditList = () => {
    let updateData = {
      _id: id,
      name: username,
      state: true,
      desc: "",
      type: btn.label,
    };
    role.updateRoleList(updateData);
    setAdds(!adds);
    setUsername("");
    setOpen(false);
  };
  const [arr, setarr] = useState([
    { value: 1, label: "品牌角色" },
    { value: 2, label: "大区角色" },
    { value: 3, label: "店铺角色" },
    { value: 4, label: "平台角色" },
  ]);
  let [username, setUsername] = useState("");
  const [selectedRow, setSelectedRow] = useState(null);
  const handleEditClick = (record: any) => {
    setSelectedRow(record); // 可以在这里做其他逻辑处理
    setUsername(record.name);
    setBtn(arr.find((item) => item.label === record.address) || arr[0]);
    setOpen(true);
  };
  const [show, setShow] = useState(false);

  let info = {
    headTitle: "提示",
    bodyTitle: "确认删除",
    bodyContent: "确认删除该角色？",
  };

  return (
    <div className="mt-10">
      <Message
        show={show}
        setShow={setShow}
        info={info}
        callBack={() => {
          role.deleteRoleList(id);
          setAdds(!adds);
          setID("");
        }}
      ></Message>
      <Card title="数据筛选" className="w-[80%] m-auto">
        <div>
          <Space>
            <Space>
              角色名称：
              <Input
                placeholder="亲输入角色名称"
                className="mr-10"
                value={role.name}
                onChange={(e) => {
                  role.xgname(e.target.value);
                }}
              />
            </Space>

            <Space className="ml-10">
              角色状态：
              <Select
                onChange={handleChange}
                style={{ width: 120 }}
                value={defaults}
                options={[
                  { value: "", label: "全部" },
                  { value: "true", label: "上线" },
                  { value: "false", label: "未上线" }
                ]}
              />
            </Space>
            <Space className="ml-10">
              <Button
                type="primary"
                onClick={() => {
                  role.getRoleList();
                  role.xgname("");
                }}
              >
                查询
              </Button>
              <Button
                type="dashed"
                onClick={() => {
                  Reset();
                }}
              >
                重置
              </Button>
            </Space>
          </Space>
        </div>
      </Card>
      <Card
        title="角色列表"
        className="mt-10 w-[80%] m-auto"
        extra={
          <Button
            type="primary"
            onClick={() => {
              setOpen(true);
              setTro(true);
            }}
          >
            <PlusOutlined />
            添加
          </Button>
        }
      >
        <Table
          dataSource={dataSource}
          columns={columns}
          rowKey={(record) => (record as RecordType)._id}
        />
        ;
      </Card>
      <Modal
        title="添加角色"
        centered
        open={open}
        footer={null}
        onCancel={() => setOpen(false)}
        width={600}
      >
        <Form
          name="basic"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          style={{ width: 600, marginTop: 50 }}
          initialValues={{ remember: true }}
          autoComplete="off"
        >
          <Form.Item label="角色名称">
            <Input
              placeholder="请输入角色名称"
              value={username}
              onChange={(e) => {
                setUsername(e.target.value);
              }}
            />
          </Form.Item>

          <Form.Item label="角色类型">
            {arr.map((item, index) => (
              <Button
                className="mr-2"
                key={index}
                type={item.value === btn.value ? "primary" : "dashed"}
                onClick={() => {
                  setBtn(item);
                }}
              >
                {item.label}
              </Button>
            ))}
          </Form.Item>
          <Form.Item label="角色描述">
            <TextArea rows={4} placeholder="请输入角色描述" />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button
              className={`${tro ? "" : "hidden"}`}
              type="primary"
              onClick={() => {
                AddList();
              }}
            >
              确认添加
            </Button>
            <Button
              className={`${tro ? "hidden" : ""}`}
              type="primary"
              onClick={() => {
                EditList();
              }}
            >
              确认修改
            </Button>
            <Button
              className="ml-2"
              onClick={() => {
                setUsername("");
                setBtn({ value: 1, label: "品牌角色" });
                setOpen(false);
              }}
            >
              取消
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
